<template>
	<div class="home">
		<section class="section section1">
			<mt-swipe :auto="3000" >
				<mt-swipe-item v-for="item in banners">
					<img class="banner_img" :src="item.src">
				</mt-swipe-item>
			</mt-swipe>
		</section>

		
		<section class="section section2">
			<div class="promotion_wrap">
				<img class="promotion_img promotion_left" src="../assets/images/promotion_left.jpg">
				<div class="promotion_spec"></div>
				<img class="promotion_img promotion_right" src="../assets/images/promotion_right.jpg">
			</div>
		</section>

		<section class="section section3">
			<div class="category_wrap">
				<div class="category_item" v-for="(item,index) in category" @click="catAction(index)">
					{{item.cat}}
				</div>
			</div>
			<div class="category_content">
				<div class="cat_content_wrap" v-for="item in category[category_index].content">
					<div class="cat_content_left">
						<img :src="item.img">
					</div>
					<div class="cat_content_right">
						<h3 class="cat_content_title">{{item.title}}</h3>
						<p class="cat_content_teacher">{{item.teacher}}</p>
						<p class="cat_content_time">直播时间：{{item.info}}</p>
					</div>
				</div>
			</div>
		</section>

		<section class="section section4">
			<kechengbiao v-for="(item,index) in mod" :cost="item.mod_cost" :industry="item.mod_industry"  :title="item.mod_title" :content="item.mod_default_course"></kechengbiao>	
		</section>
		<section class="section section5">
			<a class="all_course">查看全部课程</a>
		</section>


	</div>
</template>

<script>
import kechengbiao from './home/kechengbiao'
export default {
	name:'home',
	components:{
		kechengbiao
	},
	data(){
		return {
			mod:[
				{
					mod_title:'设计创造',
					mod_industry:{
						type:true,
						list:['不限','平面设计 1','平面设计 2','平面设计 3','平面设计 4']
					},
					mod_cost:{
						type:true,
						list:['不限','免费', '付费']
					},
					mod_default_course:[
						{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						}
					]
				},{
					mod_title:'IT互联网',
					mod_industry:{
						type:true,
						list:['不限','IT互联网 1','IT互联网 2','IT互联网 3']
					},
					mod_cost:{
						type:true,
						list:['不限','免费', '付费']
					},
					mod_default_course:[
						{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						}
					]
				},{
					mod_title:'语言留学',
					mod_industry:{
						type:true,
						list:['不限','语言留学 1','语言留学 2','语言留学 3']
					},
					mod_cost:{
						type:true,
						list:['不限','免费', '付费']
					},
					mod_default_course:[
						{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'ps淘宝美工',
							cost:'免费'

						}
					]
				},{
					mod_title:'升学考试',
					mod_industry:{
						type:false
					},
					mod_cost:{
						type:false
					},
					mod_default_course:[
						{
							imgSrc:'123123',
							title:'升学考试',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'升学考试',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'升学考试',
							cost:'免费'

						},{
							imgSrc:'123123',
							title:'升学考试',
							cost:'免费'

						}
					]
				}
			],
			banners:[
				{src:require('../assets/images/banner/banner0.jpg')},
				{src:require('../assets/images/banner/banner1.jpg')},
				{src:require('../assets/images/banner/banner2.jpg')},
				{src:require('../assets/images/banner/banner3.jpg')},
				{src:require('../assets/images/banner/banner4.jpg')},
				{src:require('../assets/images/banner/banner5.jpg')},
				{src:require('../assets/images/banner/banner6.jpg')},
				{src:require('../assets/images/banner/banner7.jpg')}
			],
			category_index:0,
			category:[
				{
					cat:'精选推荐',
					content:[
						{
							title:'精选推荐 title123456789123456789',
							teacher:'精选推荐 teacher',
							img:require('../assets/images/cat1-1.jpg'),
							info:'13:00'
						},{
							title:'精选推荐 title22222',
							teacher:'精选推荐 teacher',
							img:require('../assets/images/cat1-2.jpg'),
							info:'13:00'
						},{
							title:'精选推荐 title22222',
							teacher:'精选推荐 teacher',
							img:require('../assets/images/cat1-3.jpg'),
							info:'13:00'
						}
					]
				},{
					cat:'编程语言',
					content:[
						{
							title:'编程语言 title',
							teacher:'编程语言 teacher',
							img:require('../assets/images/cat2-1.jpg'),
							info:'13:00'
						}
					]
				},{
					cat:'平面设计',
					content:[
						{
							title:'平面设计 title',
							teacher:'平面设计 teacher',
							img:require('../assets/images/cat3-1.jpg'),
							info:'13:00'
						}
					]
				},{
					cat:'职业技能',
					content:[
						{
							title:'职业技能 title',
							teacher:'职业技能 teacher',
							img:require('../assets/images/cat4-1.jpg'),
							info:'13:00'
						}
					]
				},{
					cat:'高中',
					content:[
						{
							title:'高中 title',
							teacher:'高中 teacher',
							img:require('../assets/images/cat5-1.jpg'),
							info:'13:00'
						}
					]
				},{
					cat:'实用英语',
					content:[
						{
							title:'实用英语 title',
							teacher:'实用英语 teacher',
							img:require('../assets/images/cat6-1.jpg'),
							info:'13:00'
						}
					]
				}
			]
		}
	},
	mounted(){
		let act = document.getElementsByClassName('category_item')[0];
		act.setAttribute('class','category_item category_action')
	},
	methods:{
		catAction(index){
			this.$data.category_index = index;
			let cat = document.getElementsByClassName('category_item');
			for(let i=0; i<cat.length; i++){
				cat[i].setAttribute('class', 'category_item')
			}
			cat[index].setAttribute('class', 'category_item category_action')
		}
	}
}
</script>

<style scoped>

.section{
	margin-bottom:30px;
}
.home{ overflow: hidden; }
/***************section1***************/
.mint-swipe{
	width: 100%;
	height:4rem;
}
.banner_img{
	width: 100%;
}

/***************section2***************/
.promotion_wrap{
	height: 1.6rem;
	margin:0 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #c8c7cc;
}
.promotion_spec{
	display: inline-block;
	width: 1px;
	height: 80%;
	background-color: #c8c7cc;
}
.promotion_img{
	height:100%
}
/***************section3***************/
.category_wrap{
	overflow-x: auto;
	padding:10px;
	word-break:keep-all;       /* 不换行 */
	white-space:nowrap;        /* 不换行 */
}
.category_wrap::-webkit-scrollbar{
  display:none;
}
.category_item{
	display: inline-block;
	vertical-align: middle;
	margin-right:20px;
	font-size:0.4rem;
}
.category_action{
	font-size: 0.6rem;
	font-weight:bold;
	position:relative;
}
.category_action:after{
	content:"";
	display: block;
	width: 4px;
	height: 4px;
	border-radius:50%;
	background-color: #23b8ff;
	position: absolute;
	bottom:-6px;
	left:50%;
}

.category_content{
}
.cat_content_wrap{
	font-size:0;
	display: flex;
	width: 9.6rem;
	margin:20px auto;
	justify-content: space-between;
	align-items: center;
}
.cat_content_left{
	width: 4.7rem;
}
.cat_content_left img{
	width: 100%;
	border-radius: 10px;
}
.cat_content_right{
	width: 4.7rem;
	font-size:0.4rem;
}
.cat_content_right *{
	margin:15px 0;
	word-break:keep-all;       /* 不换行 */
	white-space:nowrap;        /* 不换行 */
	text-overflow:ellipsis;		/* 超出部分用省略号 */
	overflow: hidden;
}
/***************section4***************/

/***************section5***************/
.all_course{
	display: block;
	color:#bbb;
	background-color: #f6f6f6;
	text-align:center;
	width: 9rem;
	font-size:0.4rem;
	line-height:2;
	margin:10px auto 20px;
	border-radius:5px;
}
/***************section6***************/
/***************section7***************/
</style>